import React from 'react';
import { withRouter } from 'umi';
import { Form, Input } from 'antd';
import { CompanyStrict } from '@/containers';
import LimitInput from '@/components/LimitInput';

const Info = ({ location, form, data, disabledKeys, ...rest }) => {
    const { getFieldDecorator } = form;
    const inputRef = React.useRef();

    const isCopyPage = React.useMemo(() => {
        const { pathname = '', query } = location;
        return pathname.includes('add') && query?.id;
    }, [location]);

    const isEdit = React.useMemo(() => {
        const { pathname = '', query } = location;
        return pathname.includes('edit') && query?.id;
    }, [location]);

    React.useLayoutEffect(() => {
        if (isCopyPage) {
            // eslint-disable-next-line no-unused-expressions
            inputRef.current?.focus();
        }
    }, [isCopyPage]);

    const companyItem = form.getFieldDecorator('companyCodeList', {
        initialValue: isEdit ? data?.companyCodeList : undefined,
        rules: [
            {
                required: isCopyPage || data?.common !== 1,
                message: '适用行政机构不能为空'
            }
        ]
    })(
        <CompanyStrict
            permissionsLimit={false}
            requestParams={{ showTreeFlag: 1 }}
            placeholder="请选择行政机构"
            style={{ width: '100%' }}
            multiple
            treeCheckable
            maxTagCount={5}
            treeCheckStrictly
            disabledKeys={disabledKeys}
        />
    );

    const getCopyName = () => {
        if (data?.chName?.length > 197) {
            return `${data.chName.substring(0, 197)}-副本`;
        }
        return `${data?.chName}-副本`;
    };

    return (
        <Form style={{ maxWidth: 800 }} {...rest}>
            <Form.Item label="规则名称(中文)">
                {getFieldDecorator('chName', {
                    initialValue: isCopyPage ? getCopyName() : data?.chName,
                    rules: [
                        {
                            required: true,
                            whitespace: true,
                            message: '规则名称(中文)不能为空'
                        }
                    ]
                })(<Input ref={inputRef} placeholder="请输入规则名称(中文)" allowClear maxLength={200} />)}
            </Form.Item>
            <Form.Item label="规则名称(英文)">
                {getFieldDecorator('enName', {
                    initialValue: data?.enName || '',
                    rules: [
                        {
                            validator(rule, value, callback) {
                                const reg = new RegExp('[\u4E00-\u9FFF]');
                                if (value && reg.test(value)) {
                                    callback('规则名称(英文)不能输入中文');
                                    return;
                                }
                                callback();
                            }
                        }
                    ]
                })(<Input placeholder="请输入规则名称(英文)" allowClear maxLength={200} />)}
            </Form.Item>
            <Form.Item label="适用行政机构">{!isCopyPage && data?.common === 1 ? '全集团' : companyItem}</Form.Item>
            <Form.Item label="规则简介(中文)">
                {getFieldDecorator('chIntroduce', {
                    initialValue: data?.chIntroduce || ''
                })(
                    <LimitInput
                        area
                        placeholder="请输入规则简介(中文)"
                        autoSize={{ minRows: 3, maxRows: 6 }}
                        maxLength={4000}
                    />
                )}
            </Form.Item>
            <Form.Item label="规则简介(英文)">
                {getFieldDecorator('enIntroduce', {
                    initialValue: data?.enIntroduce || '',
                    rules: [
                        {
                            validator(rule, value, callback) {
                                const reg = new RegExp('[\u4E00-\u9FFF]');
                                if (value && reg.test(value)) {
                                    callback('规则简介(英文)不能输入中文');
                                    return;
                                }
                                callback();
                            }
                        }
                    ]
                })(
                    <LimitInput
                        area
                        placeholder="请输入规则简介(英文)"
                        autoSize={{ minRows: 3, maxRows: 6 }}
                        maxLength={4000}
                    />
                )}
            </Form.Item>
        </Form>
    );
};

export default withRouter(Info);
